// Kyle Peterson
// http://codebit.wordpress.com
(function($) {
    $.fn.thumbPopup = function(options)
    {
        //Combine the passed in options with the default settings
        settings = jQuery.extend({
            popupId: "thumbPopup",
            popupCSS: {},
            imgSmallFlag: "_t",
            imgLargeFlag: "_l",
            cursorTopOffset: 15,
            cursorLeftOffset: 15,
            loadingHtml: "<span style='padding: 5px;'>Loading</span>"
        }, options);

        //Create our popup element
        popup =
                $("<div />")
                .css(settings.popupCSS)
                .attr("id", settings.popupId)
                .css("position", "absolute")
                .appendTo("body").hide();

        //Attach hover events that manage the popup
        $(this)
                .hover(setPopup)
                .mousemove(updatePopupPosition)
                .mouseout(hidePopup);

        function setPopup(event)
        {
            var fullImgURL = $(this).attr("data-id");
            var fullTitle = $(this).attr("title");

            $(this).data("hovered", true);

            var mouse_event = event; //!!!! here need for firefox. because notmouse event on load has pageX/Y undefined.

            //Load full image in popup
            $("<img />")
                    .bind("load", {thumbImage: this}, function(event)
                    {
                        //Only display the larger image if the thumbnail is still being hovered
                        if ($(event.data.thumbImage).data("hovered") == true) {

                            var myTitle = "";

                            if (fullTitle !== undefined) {
                                var myTitle = "<div>" + fullTitle + "</div>";

                            }

                            $(popup).empty().append(this).append(myTitle);
                            $(popup).fadeIn(100);
                            updatePopupPosition(mouse_event);

                        }
                        $(event.data.thumbImage).data("cached", true);
                    })
                    .attr("src", fullImgURL);

            //If no image has been loaded yet then place a loading message
            if ($(this).data("cached") != true) {
                $(popup).append($(settings.loadingHtml));
                $(popup).fadeIn(100);
            }

            updatePopupPosition(event);
        }

        function updatePopupPosition(event)
        {
            var windowSize = getWindowSize();
            var popupSize = getPopupSize();
            if (windowSize.width + windowSize.scrollLeft < event.pageX + popupSize.width + settings.cursorLeftOffset) {
                $(popup).css("left", event.pageX - popupSize.width - settings.cursorLeftOffset);
            } else {
                $(popup).css("left", event.pageX + settings.cursorLeftOffset);
            }
            if (windowSize.height + windowSize.scrollTop < event.pageY + popupSize.height + settings.cursorTopOffset) {
                $(popup).css("top", event.pageY - popupSize.height - settings.cursorTopOffset);
            } else {
                $(popup).css("top", event.pageY + settings.cursorTopOffset);
            }

        }

        function hidePopup(event)
        {
            $(this).data("hovered", false);
            $(popup).empty().hide();
        }

        function getWindowSize() {
            return {
                scrollLeft: $(window).scrollLeft(),
                scrollTop: $(window).scrollTop(),
                width: $(window).width(),
                height: $(window).height()
            };
        }

        function getPopupSize() {
            return {
                width: $(popup).width(),
                height: $(popup).height()
            };
        }

        //Return original selection for chaining
        return this;
    };
})(jQuery);